<template>
  <div class="statistics-panel">
    <div class="panel-header">
      <div class="header-icon">
        <svg viewBox="0 0 24 24">
          <path d="M2,2H4V20H22V22H2V2M7,10H12V15H7V10M14,7H19V12H14V7Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="header-info">
        <h4 class="panel-title">关键指标</h4>
        <p class="panel-subtitle">实时数据概览</p>
      </div>
    </div>

    <div class="statistics-grid">
      <div 
        v-for="(stat, index) in statistics" 
        :key="stat.id"
        class="stat-card"
        :class="stat.type"
        :style="{ animationDelay: index * 0.05 + 's' }"
        @click="selectStat(stat.id)"
      >
        <div class="stat-icon">
          <svg viewBox="0 0 24 24">
            <path :d="stat.icon" fill="currentColor"/>
          </svg>
        </div>
        
        <div class="stat-content">
          <div class="stat-value">
            <span class="value-number">{{ formatValue(stat.value) }}</span>
            <span class="value-unit">{{ stat.unit }}</span>
          </div>
          <div class="stat-label">{{ stat.label }}</div>
          
          <div class="stat-trend" v-if="stat.trend">
            <div class="trend-indicator" :class="stat.trend.direction">
              <svg viewBox="0 0 24 24">
                <path :d="getTrendIcon(stat.trend.direction)" fill="currentColor"/>
              </svg>
              <span>{{ stat.trend.value }}%</span>
            </div>
          </div>
        </div>
        
        <div class="stat-chart" v-if="stat.chart">
          <canvas :ref="el => chartRefs[index] = el" :data-index="index"></canvas>
        </div>
      </div>
    </div>

    <div class="quick-actions">
      <div class="action-item" @click="refreshData">
        <div class="action-icon">
          <svg viewBox="0 0 24 24">
            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" fill="currentColor"/>
          </svg>
        </div>
        <span>刷新</span>
      </div>
      
      <div class="action-item" @click="exportData">
        <div class="action-icon">
          <svg viewBox="0 0 24 24">
            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
          </svg>
        </div>
        <span>导出</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const chartRefs = ref([])
const activeStatId = ref(null)

const statistics = ref([
  {
    id: 'visitors',
    label: '今日游客',
    value: 2568,
    unit: '人',
    type: 'primary',
    icon: 'M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z',
    trend: { direction: 'up', value: 12.5, period: '较昨日' },
    chart: [120, 145, 180, 220, 280, 350, 420, 380, 340, 290, 250, 200]
  },
  {
    id: 'revenue',
    label: '今日营收',
    value: 68520,
    unit: '元',
    type: 'success',
    icon: 'M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z',
    trend: { direction: 'up', value: 8.3, period: '较昨日' },
    chart: [2100, 2350, 2680, 3200, 3850, 4200, 4680, 5100, 5680, 6200, 6520, 6852]
  },
  // {
  //   id: 'satisfaction',
  //   label: '满意度',
  //   value: 94.2,
  //   unit: '%',
  //   type: 'warning',
  //   icon: 'M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
  //   trend: { direction: 'up', value: 2.1, period: '较上月' },
  //   chart: [88, 89, 91, 92, 93, 94, 95, 94, 93, 94, 95, 94.2]
  // },
  {
    id: 'parking',
    label: '可用车位',
    value: 156,
    unit: '个',
    type: 'info',
    icon: 'M18.92,2.01C18.72,1.42 18.16,1 17.5,1H6.5C5.84,1 5.29,1.42 5.08,2.01L3,8V16A1,1 0 0,0 4,17H5A1,1 0 0,0 6,16V15H18V16A1,1 0 0,0 19,17H20A1,1 0 0,0 21,16V8L18.92,2.01M6.85,3H17.14L18.22,6H5.78L6.85,3M19,13H5V8H19V13Z',
    trend: { direction: 'down', value: 5.8, period: '较昨日' },
    chart: [180, 175, 168, 162, 158, 155, 160, 165, 162, 158, 156, 156]
  },
  {
    id: 'temperature',
    label: '当前温度',
    value: 24,
    unit: '°C',
    type: 'default',
    icon: 'M15,13V5A3,3 0 0,0 9,5V13A5,5 0 0,0 12,23A5,5 0 0,0 15,13M12,4A1,1 0 0,1 13,5V8H11V5A1,1 0 0,1 12,4Z',
    trend: { direction: 'stable', value: 0, period: '较昨日' },
    chart: [22, 23, 24, 25, 26, 25, 24, 23, 22, 23, 24, 24]
  },
  {
    id: 'emergency',
    label: '紧急事件',
    value: 0,
    unit: '起',
    type: 'danger',
    icon: 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z',
    trend: { direction: 'stable', value: 0, period: '较昨日' },
    chart: [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  }
])

const formatValue = (value) => {
  if (value >= 10000) {
    return (value / 10000).toFixed(1) + '万'
  } else if (value >= 1000) {
    return (value / 1000).toFixed(1) + 'k'
  }
  return value.toString()
}

const getTrendIcon = (direction) => {
  const icons = {
    'up': 'M7,14L12,9L17,14H7Z',
    'down': 'M7,10L12,15L17,10H7Z',
    'stable': 'M8,12H16V14H8V12Z'
  }
  return icons[direction] || icons['stable']
}

const drawMiniChart = (canvas, data, index) => {
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  const rect = canvas.getBoundingClientRect()
  const dpr = window.devicePixelRatio || 1
  
  canvas.width = rect.width * dpr
  canvas.height = rect.height * dpr
  ctx.scale(dpr, dpr)
  
  const width = rect.width
  const height = rect.height
  const padding = 1
  
  const maxValue = Math.max(...data)
  const minValue = Math.min(...data)
  const range = maxValue - minValue || 1
  
  ctx.clearRect(0, 0, width, height)
  
  // 绘制渐变背景
  const gradient = ctx.createLinearGradient(0, 0, 0, height)
  gradient.addColorStop(0, 'rgba(0, 255, 136, 0.2)')
  gradient.addColorStop(1, 'rgba(0, 255, 136, 0.02)')
  
  ctx.beginPath()
  ctx.moveTo(padding, height - padding)
  
  data.forEach((value, i) => {
    const x = padding + (i / (data.length - 1)) * (width - 2 * padding)
    const y = height - padding - ((value - minValue) / range) * (height - 2 * padding)
    
    if (i === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  })
  
  ctx.lineTo(width - padding, height - padding)
  ctx.lineTo(padding, height - padding)
  ctx.closePath()
  ctx.fillStyle = gradient
  ctx.fill()
  
  // 绘制线条
  ctx.beginPath()
  data.forEach((value, i) => {
    const x = padding + (i / (data.length - 1)) * (width - 2 * padding)
    const y = height - padding - ((value - minValue) / range) * (height - 2 * padding)
    
    if (i === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  })
  
  ctx.strokeStyle = '#00ff88'
  ctx.lineWidth = 1
  ctx.stroke()
}

const selectStat = (id) => {
  activeStatId.value = id
  console.log(`选择统计项: ${id}`)
}

const refreshData = () => {
  console.log('刷新数据')
  // 这里可以添加数据刷新逻辑
}

const exportData = () => {
  console.log('导出数据')
  // 这里可以添加数据导出逻辑
}

onMounted(() => {
  nextTick(() => {
    chartRefs.value.forEach((canvas, index) => {
      if (canvas && statistics.value[index]?.chart) {
        drawMiniChart(canvas, statistics.value[index].chart, index)
      }
    })
  })
})
</script>

<style scoped>
.statistics-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.panel-header:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.4);
}

.header-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  flex-shrink: 0;
}

.header-icon svg {
  width: 16px;
  height: 16px;
}

.header-info {
  flex: 1;
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.1rem 0;
}

.panel-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  flex: 1;
}

.stat-card {
  position: relative;
  padding: 0.7rem;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  animation: slideInUp 0.4s ease-out;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

.stat-card:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 3px 15px rgba(0, 255, 136, 0.2);
}

.stat-card.primary {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.2);
}

.stat-card.success {
  background: rgba(102, 187, 106, 0.06);
  border-color: rgba(102, 187, 106, 0.15);
}

.stat-card.warning {
  background: rgba(255, 171, 64, 0.06);
  border-color: rgba(255, 171, 64, 0.15);
}

.stat-card.info {
  background: rgba(0, 188, 212, 0.06);
  border-color: rgba(0, 188, 212, 0.15);
}

.stat-card.danger {
  background: rgba(255, 112, 67, 0.06);
  border-color: rgba(255, 112, 67, 0.15);
}

.stat-card.default {
  background: rgba(158, 158, 158, 0.06);
  border-color: rgba(158, 158, 158, 0.15);
}

.stat-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.stat-card.success .stat-icon {
  background: rgba(102, 187, 106, 0.15);
  color: #66bb6a;
}

.stat-card.warning .stat-icon {
  background: rgba(255, 171, 64, 0.15);
  color: #ffab40;
}

.stat-card.info .stat-icon {
  background: rgba(0, 188, 212, 0.15);
  color: #00bcd4;
}

.stat-card.danger .stat-icon {
  background: rgba(255, 112, 67, 0.15);
  color: #ff7043;
}

.stat-card.default .stat-icon {
  background: rgba(158, 158, 158, 0.15);
  color: #9e9e9e;
}

.stat-icon svg {
  width: 14px;
  height: 14px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}

.value-number {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.value-unit {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
}

.trend-indicator.up {
  color: #66bb6a;
}

.trend-indicator.down {
  color: #ff7043;
}

.trend-indicator.stable {
  color: #9e9e9e;
}

.trend-indicator svg {
  width: 10px;
  height: 10px;
}

.stat-chart {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 20px;
  opacity: 0.6;
}

.stat-chart canvas {
  width: 100%;
  height: 100%;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.action-item:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.25);
  color: #ffffff;
}

.action-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.action-icon svg {
  width: 12px;
  height: 12px;
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media screen and (max-width: 1400px) {
  .statistics-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 0.6rem;
    min-height: 70px;
  }
  
  .value-number {
    font-size: 1rem;
  }
}
</style> 